<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器2</title>
</head>
<body>
<div id="wrap">
    <!--{{msg|filterName 2 3 }}-->
    <!--{{time| date}}-->
    <input type="text" v-model="msg3|filterHtml"> <br>
    <div v-html="msg3"></div>

</div>

</body>
</html>
<script src="vue.js"></script>
<script type="text/javascript">
    //自定义的过滤器,需要放在实例化的new Vue之前才会生效,
    //Vue.filter(参数1:过滤器的名字,参数2回调函数,函数的参数input是指msg.如果有参数3,参数4需要添加filtername后面)
    //    Vue.filter('filterName', function (input, a, b) {
    ////        alert(a+b);
    //        return input < 10 ? '0' + input : '' + input;
    //    })
    //时间戳转换时间的格式
    //    Vue.filter('date', function (input) {
    //        var oDate=new Date(input);
    //        return oDate.getFullYear()+'-'+oDate.getMonth()+1+'-'+oDate.getDay()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
    //    })
    // 过滤HTML标签方法1但是input输入的时候控制台会报错
    //        Vue.filter('filterHtml', function (input) {
    //            return input.replace(/<[^<]+>/g, '')
    //        })
    //双向过滤器过滤Html标签,方法2
    Vue.filter('filterHtml', {
        read: function (input) {//指的是model->view
            return input.replace(/<[^<]+>/g, '')
        },
        write: function (input) {//指的是view->model
            console.log(input)
        }
    });
    new Vue({
        el: '#wrap',
        data: {
            msg: 9,
            msg3: '<strong>我是strong</strong>',
            time: Date.now(),
        },
        methods: {}
    });

</script>